<template>
  <router-link to="/">Home</router-link>
    <div class="container">
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="left"></div>
        <div class="center"></div>
        <div class="center"></div>
        <div class="center"></div>
        <div class="center"></div>
        <div class="right"></div>
        <div class="right"></div>
        <div class="right"></div>
        <div class="right"></div>
    </div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: space-between;

    @mixin ball {
        width: 100px;
        margin-top: 50px;
        border-radius: 50%;
        height: 100px;
    }

    .left {
        @include ball;
        background: tomato;
        animation: infinite translateLeft 10s linear;
    }

    .right {
        @include ball;
        background: lightskyblue;
        animation: infinite translateRight 10s linear;
    }

    .center {
        @include ball;
        background: yellowgreen;
        animation: infinite translateCenter 10s linear;
    }

    @mixin generateTranslateAnimation($name, $xOffset:0, $yOffset:0) {
        @keyframes #{$name} {
            @for $i from 10 through 90 {
                #{$i+'%'} {
                    transform: translateX(#{$xOffset}#{$i}+'%') translateY(#{$yOffset}#{$i}+'%');
                }
            }
            100% {
                transform: translateX(0%) translateY(0%);
            }
        }
    }
    @include generateTranslateAnimation(translateLeft, 1, 1);
    @include generateTranslateAnimation(translateRight, -1, 1);
    @include generateTranslateAnimation(translateCenter, -1, 1);
}
</style>